<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_元素类名操作</title>
		<!-- 元素类名操作   针对css中类名 可以做添加 移除 切换 和包含类名操作
		 addClass()             有参【1个参数  多个参数】
		                        功能：匹配元素集合中的所有元素添加一个类名或者多个类名
								语法：一个参数addClass("类名")
								     两个参数addClass("类名 类名")
		 removeClass()           有参【1个参数  多个参数】
		                        功能：匹配元素集合中的所有元素移除一个类名或者多个类名
		toggleClass()           功能：如果元素有指定类名则移除 没有则添加
		hasClass()              功能：检查匹配元素集合中是否存在指定类名  返回值bool
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
		
		 <style>
			 .bg{
				 width: 300px;
				 height: 300px;
				 background: #ffaa7f;
			 }
			 .bd{
				 border: 10px solid black;
				 border-radius: 50%;
			 }
			
		 </style>
		 </head>
		<body>
		
			<h1></h1>
			<div id="targetElment"></div>
			<button id="addClassBtn">添加类名</button>
			<button id="removeClassBtn">移除类名</button>
			<button id="toggleClassBtn">切换类名</button>
			<button id="hasClassBtn">判断存在类名</button>
			<div id="resultArea"></div>
			<!--  -->
			<script>
				//1.类名切换：css里面要默认存在一些可用的类名 点击添加类名 实现300*300
				$("#addClassBtn").click(function(){
					$("#targetElment").addClass("bg bd");
					$("#resultArea").html("<h4></h4>");
				});
				
				//2.
				$("#removeClassBtn").click(function(){
					$("#targetElment").removeClass("bd bg");
					$("#resultArea").html("<h4></h4>");
				});
				//3.切换类名 点击切换 切成圆
			//	$("#toggleClassBtn").click(function(){
					
			//		$("#targetElment").toggleClass("bd");
			//	});
				//4.
				$("#toggleClassBtn").click(function(){
					$("#targetElment").toggleClass("bg");
				});
				//5.检查  BJ是否存在
				$("#hasClassBtn").click(function(){
					var hc=$("#targetElment").hasClass("bg");
					$("#resultArea").text("目标元素 bg 类名是否存在"+hc);
				});
				
				
				
				
			</script>
		
	</body>
</html>